<template>
  <el-dialog v-model="dialogVisible" title="历史事故" top="10vh" width="90%" @close="close">
    <div class="content">
      <BasicTable :columns="historyColumns" :data="historyData" :isPage="false" height="260" @row-click="rowClick"/>
    </div>
  </el-dialog>
</template>

<script setup>

const dialogVisible = ref(false)
// 历史事故
const historyColumns = [
    {
        prop: 'id',
        label: '序号',
        width: 60
    },
    {
        prop: 'temperature',
        label: '事故类型'
    },
    {
        prop: 'power',
        label: '事故时间'
    },
    {
        prop: 'location',
        label: '事故状态'
    },
]
const historyData = ref([
    {
        id: '1',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '2',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '3',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '4',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '5',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '6',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '7',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '8',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '9',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '10',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '11',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '12',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '13',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
])

const rowClick= (row) => {
  window.dispatchEvent(new CustomEvent('clickWateHanle', { detail: row }))
  close()
}

const open = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}
defineExpose({ open, close })

</script>

<style scoped lang="scss">
.content {
  height: 250px;
}
</style>
